<section class="row">
    <div class="four columns mobile-two">

<h2>Requirements</h2>
<p>To use Maplace.js, you need to include jQuery, the Google API v3, and the plugin file.</p>
<pre class="prettyprint">
&lt;script src="https://maps.google.com/maps/api/js?sensor=false&amp;libraries=geometry&amp;v=3.22&key=YOUR_API_KEY"&gt;
&lt;/script&gt;
&lt;script src="https://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
&lt;script src="maplace.min.js"&gt;&lt;/script&gt;
</pre>
<br/>
<h3>About the API_KEY for Google Maps API</h3>
<p>
All JavaScript API applications require authentication using an API key (or a client ID for Google Maps API for Work customers). Including a key when loading the API allows you to monitor your application's API usage in the Google Developers Console, enables per-key instead of per-IP-address quota limits, and ensures that Google can contact you about your application if necessary.
</p>
<p>
<a href="https://developers.google.com/maps/documentation/javascript/get-api-key" target="_blank" title="Google Maps JavaScript API developers website">For more info please go to Google Maps JavaScript API developers website</a>
</p>

<h2>Html</h2>
<p>Just place a DIV in your page and give it a unique ID or class, "gmap" by default, but you can change it in the options.</p>
<pre class="prettyprint">
&lt;div id="gmap" style="with:300px;height:250px;"&gt;&lt;/div&gt;
</pre>

<p>If you want the menu outside of the map you need to include another DIV with a unique ID or class, "controls" by default.</p>
<pre class="prettyprint">
&lt;div id="controls"&gt;&lt;/div&gt;
</pre>

<h2>JS</h2>
<p>Now you can create the map.</p>
<pre class="prettyprint">
&lt;script type="text/javascript"&gt;
$(function() {
    new Maplace({
        locations: [{...}, {...}],
        controls_on_map: false
    }).Load();
});
&lt;/script&gt;
</pre>
<p>If you want to center the map on a single location without any marker, you have two options:</p>
<pre class="prettyprint">
new Maplace({
    show_markers: false,
    locations: [{
        lat: 45.9,
        lon: 10.9,
        zoom: 8
    }]
}).Load();

//or

new Maplace({
    map_options: {
        set_center: [45.9, 10.9],
        zoom: 8
    }
}).Load();
</pre>
    </div>
</section>
